<template>
  <div class="network-tools">
    <ToolContainer
      tool-name="网络工具"
      title="网络诊断与测试工具"
      description="提供IP查询、端口检测、网络延迟测试等网络诊断功能"
      :header-icon="Connection"
      icon-color="#67C23A"
      default-tab="ip"
      @tab-change="handleTabChange"
    >
      <template #tabs>
        <!-- IP查询标签页 -->
        <el-tab-pane label="IP查询" name="ip">
          <ToolSection
            :show-upload="false"
            :show-progress="false"
          >
            <template #options>
              <div class="ip-section">
                <el-form label-width="100px">
                  <el-form-item label="IP地址">
                    <el-input
                      v-model="ipInput"
                      placeholder="请输入IP地址（留空查询本机IP）"
                    />
                  </el-form-item>
                </el-form>
              </div>
            </template>

            <template #actions>
              <el-button 
                type="primary" 
                @click="queryIpInfo"
                :loading="loading"
              >
                查询IP信息
              </el-button>
              <el-button 
                type="success" 
                @click="getMyIp"
                :loading="loading"
              >
                获取本机IP
              </el-button>
            </template>

            <template #result>
              <div v-if="ipResult" class="result-display">
                <h4>IP信息查询结果：</h4>
                <div class="ip-info">
                  <div class="info-item">
                    <span class="label">IP地址：</span>
                    <span class="value">{{ ipResult.ip }}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">国家：</span>
                    <span class="value">{{ ipResult.country || '未知' }}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">地区：</span>
                    <span class="value">{{ ipResult.region || '未知' }}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">城市：</span>
                    <span class="value">{{ ipResult.city || '未知' }}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">ISP：</span>
                    <span class="value">{{ ipResult.isp || '未知' }}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">时区：</span>
                    <span class="value">{{ ipResult.timezone || '未知' }}</span>
                  </div>
                </div>
                <div class="result-actions">
                  <el-button type="success" @click="copyResult('ip')">
                    复制信息
                  </el-button>
                </div>
              </div>
            </template>
          </ToolSection>
        </el-tab-pane>

        <!-- 端口检测标签页 -->
        <el-tab-pane label="端口检测" name="port">
          <ToolSection
            :show-upload="false"
            :show-progress="portChecking"
            :progress="portProgress"
            :progress-text="portProgressText"
          >
            <template #options>
              <div class="port-section">
                <el-form label-width="100px">
                  <el-form-item label="主机地址">
                    <el-input
                      v-model="portHost"
                      placeholder="请输入主机地址或域名"
                    />
                  </el-form-item>
                  <el-form-item label="端口范围">
                    <div class="port-range">
                      <el-input
                        v-model="portStart"
                        placeholder="起始端口"
                        type="number"
                        style="width: 120px;"
                      />
                      <span style="margin: 0 10px;">-</span>
                      <el-input
                        v-model="portEnd"
                        placeholder="结束端口"
                        type="number"
                        style="width: 120px;"
                      />
                    </div>
                  </el-form-item>
                  <el-form-item label="常用端口">
                    <el-checkbox-group v-model="commonPorts">
                      <el-checkbox label="80">HTTP (80)</el-checkbox>
                      <el-checkbox label="443">HTTPS (443)</el-checkbox>
                      <el-checkbox label="22">SSH (22)</el-checkbox>
                      <el-checkbox label="21">FTP (21)</el-checkbox>
                      <el-checkbox label="25">SMTP (25)</el-checkbox>
                      <el-checkbox label="3306">MySQL (3306)</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-form>
              </div>
            </template>

            <template #actions>
              <el-button 
                type="primary" 
                @click="checkPorts"
                :loading="portChecking"
                :disabled="!portHost.trim()"
              >
                检测端口
              </el-button>
              <el-button 
                type="success" 
                @click="checkCommonPorts"
                :loading="portChecking"
                :disabled="!portHost.trim() || commonPorts.length === 0"
              >
                检测常用端口
              </el-button>
            </template>

            <template #result>
              <div v-if="portResults.length > 0" class="result-display">
                <h4>端口检测结果：</h4>
                <div class="port-results">
                  <div 
                    v-for="result in portResults" 
                    :key="result.port" 
                    class="port-item"
                    :class="{ 'open': result.status === 'open', 'closed': result.status === 'closed' }"
                  >
                    <span class="port-number">{{ result.port }}</span>
                    <span class="port-status">{{ result.status === 'open' ? '开放' : '关闭' }}</span>
                    <span class="port-service">{{ result.service || '' }}</span>
                  </div>
                </div>
                <div class="result-actions">
                  <el-button type="success" @click="copyResult('port')">
                    复制结果
                  </el-button>
                </div>
              </div>
            </template>
          </ToolSection>
        </el-tab-pane>

        <!-- 网络延迟测试标签页 -->
        <el-tab-pane label="延迟测试" name="ping">
          <ToolSection
            :show-upload="false"
            :show-progress="pinging"
            :progress="pingProgress"
            :progress-text="pingProgressText"
          >
            <template #options>
              <div class="ping-section">
                <el-form label-width="100px">
                  <el-form-item label="目标地址">
                    <el-input
                      v-model="pingTarget"
                      placeholder="请输入域名或IP地址"
                    />
                  </el-form-item>
                  <el-form-item label="测试次数">
                    <el-select v-model="pingCount" style="width: 120px;">
                      <el-option label="5次" :value="5" />
                      <el-option label="10次" :value="10" />
                      <el-option label="20次" :value="20" />
                      <el-option label="50次" :value="50" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="预设地址">
                    <el-radio-group v-model="presetTarget">
                      <el-radio label="baidu.com">百度</el-radio>
                      <el-radio label="google.com">谷歌</el-radio>
                      <el-radio label="github.com">GitHub</el-radio>
                      <el-radio label="8.8.8.8">Google DNS</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-form>
              </div>
            </template>

            <template #actions>
              <el-button 
                type="primary" 
                @click="startPing"
                :loading="pinging"
                :disabled="!pingTarget.trim()"
              >
                开始测试
              </el-button>
              <el-button 
                @click="usePreset"
                :disabled="!presetTarget"
              >
                使用预设
              </el-button>
              <el-button 
                v-if="pinging"
                type="danger" 
                @click="stopPing"
              >
                停止测试
              </el-button>
            </template>

            <template #result>
              <div v-if="pingResults.length > 0" class="result-display">
                <h4>延迟测试结果：</h4>
                <div class="ping-stats">
                  <div class="stat-item">
                    <span class="label">目标地址：</span>
                    <span class="value">{{ pingTarget }}</span>
                  </div>
                  <div class="stat-item">
                    <span class="label">测试次数：</span>
                    <span class="value">{{ pingResults.length }}</span>
                  </div>
                  <div class="stat-item">
                    <span class="label">平均延迟：</span>
                    <span class="value">{{ averagePing }}ms</span>
                  </div>
                  <div class="stat-item">
                    <span class="label">最小延迟：</span>
                    <span class="value">{{ minPing }}ms</span>
                  </div>
                  <div class="stat-item">
                    <span class="label">最大延迟：</span>
                    <span class="value">{{ maxPing }}ms</span>
                  </div>
                </div>
                <div class="ping-details">
                  <h5>详细结果：</h5>
                  <div class="ping-list">
                    <div 
                      v-for="(result, index) in pingResults" 
                      :key="index" 
                      class="ping-item"
                    >
                      <span class="ping-index">{{ index + 1 }}.</span>
                      <span class="ping-time">{{ result }}ms</span>
                    </div>
                  </div>
                </div>
                <div class="result-actions">
                  <el-button type="success" @click="copyResult('ping')">
                    复制结果
                  </el-button>
                </div>
              </div>
            </template>
          </ToolSection>
        </el-tab-pane>

        <!-- DNS查询标签页 -->
        <el-tab-pane label="DNS查询" name="dns">
          <ToolSection
            :show-upload="false"
            :show-progress="false"
          >
            <template #options>
              <div class="dns-section">
                <el-form label-width="100px">
                  <el-form-item label="域名">
                    <el-input
                      v-model="dnsQuery"
                      placeholder="请输入要查询的域名"
                    />
                  </el-form-item>
                  <el-form-item label="记录类型">
                    <el-select v-model="dnsType" style="width: 120px;">
                      <el-option label="A" value="A" />
                      <el-option label="AAAA" value="AAAA" />
                      <el-option label="CNAME" value="CNAME" />
                      <el-option label="MX" value="MX" />
                      <el-option label="TXT" value="TXT" />
                      <el-option label="NS" value="NS" />
                    </el-select>
                  </el-form-item>
                </el-form>
              </div>
            </template>

            <template #actions>
              <el-button 
                type="primary" 
                @click="queryDns"
                :loading="loading"
                :disabled="!dnsQuery.trim()"
              >
                查询DNS
              </el-button>
              <el-button 
                type="success" 
                @click="queryAllRecords"
                :loading="loading"
                :disabled="!dnsQuery.trim()"
              >
                查询所有记录
              </el-button>
            </template>

            <template #result>
              <div v-if="dnsResults.length > 0" class="result-display">
                <h4>DNS查询结果：</h4>
                <div class="dns-results">
                  <div 
                    v-for="result in dnsResults" 
                    :key="result.type + result.value" 
                    class="dns-item"
                  >
                    <span class="dns-type">{{ result.type }}</span>
                    <span class="dns-value">{{ result.value }}</span>
                    <span class="dns-ttl">TTL: {{ result.ttl || 'N/A' }}</span>
                  </div>
                </div>
                <div class="result-actions">
                  <el-button type="success" @click="copyResult('dns')">
                    复制结果
                  </el-button>
                </div>
              </div>
            </template>
          </ToolSection>
        </el-tab-pane>
      </template>
    </ToolContainer>

    <!-- 功能介绍组件 -->
    <FeatureIntro
      :title="featureConfig.title"
      :description="featureConfig.description"
      :header-icon="featureConfig.headerIcon"
      :features="featureConfig.features"
      :initial-visible="showIntro"
      @close="showIntro = false"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Connection } from '@element-plus/icons-vue'
import ToolContainer from '@/components/ToolContainer.vue'
import ToolSection from '@/components/ToolSection.vue'
import FeatureIntro from '@/components/FeatureIntro.vue'
import { featuresConfig } from '@/config/featuresConfig.js'

// 基础数据
const loading = ref(false)
const showIntro = ref(true)
const featureConfig = featuresConfig.networkTools

// IP查询相关
const ipInput = ref('')
const ipResult = ref(null)

// 端口检测相关
const portHost = ref('')
const portStart = ref('80')
const portEnd = ref('100')
const commonPorts = ref(['80', '443'])
const portResults = ref([])
const portChecking = ref(false)
const portProgress = ref(0)
const portProgressText = ref('')

// 延迟测试相关
const pingTarget = ref('')
const pingCount = ref(10)
const presetTarget = ref('baidu.com')
const pingResults = ref([])
const pinging = ref(false)
const pingProgress = ref(0)
const pingProgressText = ref('')

// DNS查询相关
const dnsQuery = ref('')
const dnsType = ref('A')
const dnsResults = ref([])

// 计算属性
const averagePing = computed(() => {
  if (pingResults.value.length === 0) return 0
  const sum = pingResults.value.reduce((a, b) => a + b, 0)
  return Math.round(sum / pingResults.value.length)
})

const minPing = computed(() => {
  if (pingResults.value.length === 0) return 0
  return Math.min(...pingResults.value)
})

const maxPing = computed(() => {
  if (pingResults.value.length === 0) return 0
  return Math.max(...pingResults.value)
})

// 事件处理
function handleTabChange(tabName: string) {
  console.log('切换到标签页:', tabName)
}

// IP查询功能
async function queryIpInfo() {
  loading.value = true
  try {
    // 模拟IP查询（实际项目中需要调用真实的IP查询API）
    const ip = ipInput.value.trim() || await getCurrentIp()
    
    // 这里应该调用真实的IP查询API
    // 现在使用模拟数据
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    ipResult.value = {
      ip: ip,
      country: '中国',
      region: '广东省',
      city: '深圳市',
      isp: '中国电信',
      timezone: 'Asia/Shanghai'
    }
    
    ElMessage.success('IP信息查询完成')
  } catch (error) {
    ElMessage.error('查询失败：' + error.message)
  } finally {
    loading.value = false
  }
}

async function getMyIp() {
  loading.value = true
  try {
    // 模拟获取本机IP
    await new Promise(resolve => setTimeout(resolve, 500))
    const ip = '192.168.1.100' // 模拟IP
    ipInput.value = ip
    await queryIpInfo()
  } catch (error) {
    ElMessage.error('获取IP失败：' + error.message)
  } finally {
    loading.value = false
  }
}

async function getCurrentIp() {
  // 模拟获取当前IP
  return '192.168.1.100'
}

// 端口检测功能
async function checkPorts() {
  if (!portHost.value.trim()) {
    ElMessage.warning('请输入主机地址')
    return
  }
  
  const start = parseInt(portStart.value)
  const end = parseInt(portEnd.value)
  
  if (start > end) {
    ElMessage.warning('起始端口不能大于结束端口')
    return
  }
  
  if (end - start > 100) {
    ElMessage.warning('端口范围不能超过100个')
    return
  }
  
  portChecking.value = true
  portResults.value = []
  portProgress.value = 0
  
  const total = end - start + 1
  
  for (let port = start; port <= end; port++) {
    portProgressText.value = `正在检测端口 ${port}...`
    
    // 模拟端口检测
    await new Promise(resolve => setTimeout(resolve, 100))
    
    const isOpen = Math.random() > 0.8 // 随机模拟端口状态
    portResults.value.push({
      port: port,
      status: isOpen ? 'open' : 'closed',
      service: isOpen ? getServiceName(port) : null
    })
    
    portProgress.value = Math.round(((port - start + 1) / total) * 100)
  }
  
  portChecking.value = false
  ElMessage.success('端口检测完成')
}

async function checkCommonPorts() {
  if (!portHost.value.trim()) {
    ElMessage.warning('请输入主机地址')
    return
  }
  
  if (commonPorts.value.length === 0) {
    ElMessage.warning('请选择要检测的常用端口')
    return
  }
  
  portChecking.value = true
  portResults.value = []
  portProgress.value = 0
  
  const total = commonPorts.value.length
  
  for (let i = 0; i < commonPorts.value.length; i++) {
    const port = parseInt(commonPorts.value[i])
    portProgressText.value = `正在检测端口 ${port}...`
    
    // 模拟端口检测
    await new Promise(resolve => setTimeout(resolve, 200))
    
    const isOpen = Math.random() > 0.5 // 随机模拟端口状态
    portResults.value.push({
      port: port,
      status: isOpen ? 'open' : 'closed',
      service: getServiceName(port)
    })
    
    portProgress.value = Math.round(((i + 1) / total) * 100)
  }
  
  portChecking.value = false
  ElMessage.success('常用端口检测完成')
}

function getServiceName(port: number): string {
  const services = {
    21: 'FTP',
    22: 'SSH',
    23: 'Telnet',
    25: 'SMTP',
    53: 'DNS',
    80: 'HTTP',
    110: 'POP3',
    143: 'IMAP',
    443: 'HTTPS',
    993: 'IMAPS',
    995: 'POP3S',
    3306: 'MySQL',
    5432: 'PostgreSQL',
    6379: 'Redis',
    27017: 'MongoDB'
  }
  return services[port] || 'Unknown'
}

// 延迟测试功能
async function startPing() {
  if (!pingTarget.value.trim()) {
    ElMessage.warning('请输入目标地址')
    return
  }
  
  pinging.value = true
  pingResults.value = []
  pingProgress.value = 0
  
  for (let i = 0; i < pingCount.value; i++) {
    if (!pinging.value) break // 检查是否被停止
    
    pingProgressText.value = `正在测试第 ${i + 1} 次...`
    
    // 模拟ping测试
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 模拟延迟时间（20-200ms）
    const latency = Math.round(Math.random() * 180 + 20)
    pingResults.value.push(latency)
    
    pingProgress.value = Math.round(((i + 1) / pingCount.value) * 100)
  }
  
  pinging.value = false
  if (pingResults.value.length > 0) {
    ElMessage.success('延迟测试完成')
  }
}

function stopPing() {
  pinging.value = false
  ElMessage.info('测试已停止')
}

function usePreset() {
  if (presetTarget.value) {
    pingTarget.value = presetTarget.value
  }
}

// DNS查询功能
async function queryDns() {
  if (!dnsQuery.value.trim()) {
    ElMessage.warning('请输入要查询的域名')
    return
  }
  
  loading.value = true
  try {
    // 模拟DNS查询
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 模拟DNS记录
    const mockRecords = {
      'A': ['192.168.1.1', '192.168.1.2'],
      'AAAA': ['2001:db8::1'],
      'CNAME': ['www.example.com'],
      'MX': ['10 mail.example.com'],
      'TXT': ['v=spf1 include:_spf.example.com ~all'],
      'NS': ['ns1.example.com', 'ns2.example.com']
    }
    
    const records = mockRecords[dnsType.value] || []
    dnsResults.value = records.map(record => ({
      type: dnsType.value,
      value: record,
      ttl: Math.floor(Math.random() * 3600) + 300
    }))
    
    ElMessage.success('DNS查询完成')
  } catch (error) {
    ElMessage.error('查询失败：' + error.message)
  } finally {
    loading.value = false
  }
}

async function queryAllRecords() {
  if (!dnsQuery.value.trim()) {
    ElMessage.warning('请输入要查询的域名')
    return
  }
  
  loading.value = true
  try {
    // 模拟查询所有记录类型
    await new Promise(resolve => setTimeout(resolve, 1500))
    
    dnsResults.value = [
      { type: 'A', value: '192.168.1.1', ttl: 300 },
      { type: 'A', value: '192.168.1.2', ttl: 300 },
      { type: 'AAAA', value: '2001:db8::1', ttl: 300 },
      { type: 'CNAME', value: 'www.example.com', ttl: 3600 },
      { type: 'MX', value: '10 mail.example.com', ttl: 3600 },
      { type: 'TXT', value: 'v=spf1 include:_spf.example.com ~all', ttl: 3600 },
      { type: 'NS', value: 'ns1.example.com', ttl: 86400 },
      { type: 'NS', value: 'ns2.example.com', ttl: 86400 }
    ]
    
    ElMessage.success('所有DNS记录查询完成')
  } catch (error) {
    ElMessage.error('查询失败：' + error.message)
  } finally {
    loading.value = false
  }
}

// 工具函数
function copyResult(type: string) {
  let text = ''
  
  switch (type) {
    case 'ip':
      if (ipResult.value) {
        text = `IP地址：${ipResult.value.ip}\n国家：${ipResult.value.country}\n地区：${ipResult.value.region}\n城市：${ipResult.value.city}\nISP：${ipResult.value.isp}\n时区：${ipResult.value.timezone}`
      }
      break
    case 'port':
      text = portResults.value.map(result => 
        `端口 ${result.port}: ${result.status === 'open' ? '开放' : '关闭'}${result.service ? ` (${result.service})` : ''}`
      ).join('\n')
      break
    case 'ping':
      text = `目标地址：${pingTarget.value}\n测试次数：${pingResults.value.length}\n平均延迟：${averagePing.value}ms\n最小延迟：${minPing.value}ms\n最大延迟：${maxPing.value}ms\n\n详细结果：\n${pingResults.value.map((result, index) => `${index + 1}. ${result}ms`).join('\n')}`
      break
    case 'dns':
      text = dnsResults.value.map(result => 
        `${result.type}: ${result.value} (TTL: ${result.ttl})`
      ).join('\n')
      break
  }
  
  if (text) {
    navigator.clipboard.writeText(text)
    ElMessage.success('结果已复制到剪贴板')
  } else {
    ElMessage.warning('没有可复制的内容')
  }
}
</script>

<style scoped>
.network-tools {
  position: relative;
}

.ip-section,
.port-section,
.ping-section,
.dns-section {
  width: 100%;
}

.result-display {
  width: 100%;
}

.result-display h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--el-text-color-primary, #303133);
}

.result-actions {
  margin-top: 16px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* IP信息样式 */
.ip-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-item {
  display: flex;
  align-items: center;
  padding: 12px;
  background: var(--el-bg-color-page, #fafbfc);
  border-radius: 6px;
  border: 1px solid var(--el-border-color-lighter, #f2f6fc);
}

.info-item .label {
  font-weight: 500;
  color: var(--el-text-color-regular, #606266);
  min-width: 80px;
}

.info-item .value {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  color: var(--el-text-color-primary, #303133);
  font-weight: 600;
}

/* 端口检测样式 */
.port-range {
  display: flex;
  align-items: center;
}

.port-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.port-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid var(--el-border-color-light, #e4e7ed);
}

.port-item.open {
  background: var(--el-color-success-light-9, #f0f9ff);
  border-color: var(--el-color-success-light-5, #95de64);
}

.port-item.closed {
  background: var(--el-color-info-light-9, #f4f4f5);
  border-color: var(--el-border-color-light, #e4e7ed);
}

.port-number {
  font-weight: 600;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  min-width: 50px;
}

.port-status {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 3px;
  color: white;
}

.port-item.open .port-status {
  background: var(--el-color-success, #67c23a);
}

.port-item.closed .port-status {
  background: var(--el-color-info, #909399);
}

.port-service {
  font-size: 12px;
  color: var(--el-text-color-regular, #606266);
}

/* 延迟测试样式 */
.ping-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.stat-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: var(--el-bg-color-page, #fafbfc);
  border-radius: 4px;
  border: 1px solid var(--el-border-color-lighter, #f2f6fc);
}

.stat-item .label {
  font-weight: 500;
  color: var(--el-text-color-regular, #606266);
  min-width: 80px;
}

.stat-item .value {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  color: var(--el-text-color-primary, #303133);
  font-weight: 600;
}

.ping-details h5 {
  margin: 16px 0 8px 0;
  font-size: 14px;
  color: var(--el-text-color-primary, #303133);
}

.ping-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
}

.ping-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--el-bg-color-page, #fafbfc);
  border-radius: 3px;
  font-size: 12px;
}

.ping-index {
  color: var(--el-text-color-regular, #606266);
  min-width: 20px;
}

.ping-time {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-weight: 600;
  color: var(--el-text-color-primary, #303133);
}

/* DNS查询样式 */
.dns-results {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dns-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--el-bg-color-page, #fafbfc);
  border-radius: 6px;
  border: 1px solid var(--el-border-color-lighter, #f2f6fc);
}

.dns-type {
  font-weight: 600;
  color: var(--el-color-primary, #409eff);
  min-width: 60px;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

.dns-value {
  flex: 1;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  color: var(--el-text-color-primary, #303133);
}

.dns-ttl {
  font-size: 12px;
  color: var(--el-text-color-regular, #606266);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .result-actions {
    flex-direction: column;
  }
  
  .port-results {
    grid-template-columns: 1fr;
  }
  
  .ping-list {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  }
  
  .info-item,
  .stat-item,
  .dns-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .info-item .label,
  .stat-item .label {
    min-width: auto;
  }
}
</style> 